<template>
  <div class="page-one">
    <div class="page1-top" :style="{backgroundImage: 'url('+productDetail.bannerImage+')'}">
    </div>
    <div class="page1-bottom" :style="{backgroundImage: 'url('+productDetail.secondBackgroupImage+')'}">
      <!-- <template v-if=" productType === 'wages'"> -->
      <img :src="productDetail.titleImage" alt="" :style="'width:'+ pxToRem(productDetail.titleWidth) +'rem;'" class="title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".2s" swiper-animate-delay=".2s">
      <img :src="productDetail.mainImage" alt="" :style="'width:'+ pxToRem(productDetail.mainWidth) +'rem;'" class="img wages-img ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".2s" swiper-animate-delay=".4s">
      <!-- </template> -->
      <!-- <template v-if=" productType === 'decoration'">
        <img src="./img/decoration-title.png" alt="" class="title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".2s" swiper-animate-delay=".2s">
        <img src="./img/decoration-img.png" alt="" class="img decoration-img ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".2s" swiper-animate-delay=".4s">
      </template>
      <template v-if=" productType === 'tourism'">
        <img src="./img/tourism-title.png" alt="" class="title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".2s" swiper-animate-delay=".2s">
        <img src="./img/tourism-img.png" alt="" class="img tourism-img ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".2s" swiper-animate-delay=".4s">
      </template>
      <template v-if=" productType === 'young'">
        <img src="./img/young-title.png" alt="" class="title ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".2s" swiper-animate-delay=".2s">
        <img src="./img/young-page1-bg2.png" alt="" class="img young-img ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".2s" swiper-animate-delay=".4s">
      </template> -->
      <p class="product-character ani" swiper-animate-effect="fadeInRight" swiper-animate-duration=".2s" swiper-animate-delay=".7s">{{productDetail.desc1}}</p>
      <p class="product-desc ani" :class="{col333: productType === 'young'}" swiper-animate-effect="fadeInLeft" swiper-animate-duration=".2s" swiper-animate-delay=".9s">{{productDetail.desc2}}</p>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    data () {
      return {
      }
    },
    props: {
      productType: {
        type: String,
        default () {
          return 'wages'
        }
      }
    },
    computed: {
      ...mapGetters([
        'productDetail'
      ])
    },
    methods: {
    },
    created () {
    }
  }
</script>

<style lang="scss">
  .page1-top {
  	position: relative;
  	height: rem(410);
  	background-position: top center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	&::after {
  		position: absolute;
  		content: '';
  		width: 100%;
  		height: 100%;
  		left: 0;
  		top: 0;
  		background-color: rgba(0, 0, 0, 0.3);
  	}
  }
  .page1-bottom {
  	position: relative;
  	height: rem(1100);
  	background-position: top center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	.title {
  		position: absolute;
  		width: rem(196);
  		top: rem(36);
  		left: rem(22);
  	}
  	.img {
  		position: absolute;
  		left: 50%;
  		&.wages-img {
  			top: rem(186);
  			// width: rem(421);
        transform: translateX(-50%);
  			// margin-left: rem(-210.5);
  		}
  		&.decoration-img {
  			top: rem(150);
  			// width: rem(670);
        // margin-left: rem(-335);
        transform: translateX(-50%);
  		}
  		&.tourism-img {
  			top: rem(302);
        transform: translateX(-50%);
  			// width: rem(688);
  			// margin-left: rem(-344);
  		}
  		&.young-img {
        // width: rem(736);
        transform: translateX(-50%);
  			top: rem(160);
  			// margin-left: rem(-368);
  		}
  	}
  	.product-character {
  		width: rem(452);
  		font-size: rem(24);
  		font-size: rem(24);
  		line-height: rem(38);
  		text-align: right;
  		padding: rem(56) 0 0 rem(274);
  	}
  	.product-desc {
  		margin: rem(450) rem(75) 0 rem(75);
  		font-size: rem(24);
  		line-height: rem(38);
  		&.col333 {
  			color: #333;
  			margin-top: rem(560);
  		}
  	}
  }
</style>
